<template>
	<div class="_wz_vehicleBriefly">
    <template v-if="seeType">
      <table cellpadding="0" cellspacing="0" border="0">
        <colgroup>
          <col width="13%">
          <col width="20%">
          <col width="13%">
          <col width="20%">
          <col width="13%">
          <col width="20%">
        </colgroup>
        <tbody>
        <tr>
          <td colspan="2" rowspan="4" style="border-top: 0px;border-bottom: 0px;">
            <div class="demo-upload-list">
              <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                <img :src="!!carFormData.wzDrivingLicenseImg?apiUrl.imgUrl+carFormData.wzDrivingLicenseImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
              </viewer>
            </div>
          </td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">车牌号</td>
          <td style="border-top: 0px;">{{!!carFormData.wzVehiclePlateNo?carFormData.wzVehiclePlateNo:'--'}}</td>
          <td style="text-align: right;font-weight: 600;border-top: 0px;">车架号</td>
          <td style="border-top: 0px;">{{!!carFormData.wzVehicleFrameNo?carFormData.wzVehicleFrameNo:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">车主业户</td>
          <td>{{!!carFormData.wzVehicleOwnerName?carFormData.wzVehicleOwnerName:'--'}}</td>
          <td style="text-align: right;font-weight: 600;">车主电话</td>
          <td>{{!!carFormData.wzVehicleOwnerPhone?carFormData.wzVehicleOwnerPhone:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;">车辆类型</td>
          <td>{{!!carFormData.wzVehicleType?carFormData.wzVehicleType:'--'}}</td>
          <td style="text-align: right;font-weight: 600;">初登日期</td>
          <td>{{!!carFormData.wzVehicleDrivingPermitIssueDate?carFormData.wzVehicleDrivingPermitIssueDate:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: right;font-weight: 600;border-bottom: 0px;">地理区域</td>
          <td colspan="3" style="border-bottom: 0px;">{{!!carFormData.wzProvinceName?carFormData.wzProvinceName+' '+carFormData.wzCityName+' '+carFormData.wzCountyName :'--'}}</td>
        </tr>
        </tbody>
      </table>
    </template>
    <template v-else>
      <Card dis-hover :bordered="true" style="margin:0 0 10px;">
        <p slot="title">基本信息</p>
        <Form label-position="right" :label-width="80" inline>
          <Row>
            <i-col span="3">
              <div style="margin: auto;width: 100px;">
                <div class="_wz_vehicle_details">
                  <viewer style="width: 100%;height: 100%;">
                    <img :src="!!carFormData.wzDrivingLicenseImg?apiUrl.imgUrl+carFormData.wzDrivingLicenseImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                  </viewer>
                </div>
                <div style="line-height: 30px;text-align: center;">行驶证照片</div>
              </div>
            </i-col>
            <i-col span="21">
              <i-col span="8">
                <FormItem label="车牌号">
                  <i-input v-model="carFormData.wzVehiclePlateNo" placeholder="--" disabled />
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="车架号">
                  <i-input v-model="carFormData.wzVehicleFrameNo" placeholder="--" disabled />
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="车辆类型">
                  <i-input v-model="carFormData.wzVehicleType" placeholder="--" disabled />
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="车主业户">
                  <i-input v-model="carFormData.wzVehicleOwnerName" placeholder="--" disabled />
                </FormItem>
              </i-col>

              <i-col span="8">
                <FormItem label="车主电话">
                  <i-input v-model="carFormData.wzVehicleOwnerPhone" placeholder="--" disabled />
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="初登日期">
                  <i-input v-model="carFormData.wzVehicleDrivingPermitIssueDate" placeholder="--" disabled />
                </FormItem>
              </i-col>


              <i-col span="8">
                <FormItem label="所属省份">
                  <i-input v-model="carFormData.wzProvinceName" placeholder="--" disabled />
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="所属地市">
                  <i-input v-model="carFormData.wzCityName" placeholder="--" disabled />
                </FormItem>
              </i-col>
              <i-col span="8">
                <FormItem label="所属区县">
                  <i-input v-model="carFormData.wzCountyName" placeholder="--" disabled />
                </FormItem>
              </i-col>
            </i-col>
          </Row>
        </Form>
      </Card>
    </template>

	</div>
</template>
<script>
	export default {
		props: ['vehicleBrieflyData','seeType'],//接收来自父组件的数据
		data() {
			return {
				carFormData: {},
			}
		},
		beforeCreate() {//beforeCreate创建前状态

		},
		created() {//created创建完毕状态

		},
		beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

		},
		mounted() {//mounted 挂载结束状态
			this.vehicleBrieflyFun(this.vehicleBrieflyData)
		},
		methods: {//执行的方法
			vehicleBrieflyFun(data) {
				let that = this;
				//清空数据
        // 车牌号、 carPlateNo  trailerPlateNo
        // 车架号、 frameNo     trailerFrameNo
        // 车辆类型 vehicleType trailerType

        // 车主业户、  vehicleOwnerName  trailerOwnerName
        // 车主电话、  vehicleOwnerPhone trailerOwnerPhone
        // 初登日期   vehicleDrivingPermitRegisterDate  trailerDrivingPermitIssueDate

        // 所属省份、  provinceName  provinceName
        // 所属地市、  cityName      cityName
        // 所属区县   countyName    countyName

				that.$set(that.carFormData, 'wzDrivingLicenseImg', '')//行驶证照片

        that.$set(that.carFormData, 'wzVehiclePlateNo', '')//车牌号
        that.$set(that.carFormData, 'wzVehicleFrameNo', '')//车架号
        that.$set(that.carFormData, 'wzVehicleType', '')//车辆类型

				that.$set(that.carFormData, 'wzVehicleOwnerName', '')//车主业户
				that.$set(that.carFormData, 'wzVehicleOwnerPhone', '')//车主电话
        that.$set(that.carFormData, 'wzVehicleDrivingPermitIssueDate', '')//初登日期

				that.$set(that.carFormData, 'wzProvinceName', '')//所属省份
				that.$set(that.carFormData, 'wzCityName', '')//所属地市
				that.$set(that.carFormData, 'wzCountyName', '')//所属区县

				that.$set(that.carFormData, 'data', '')//全部数据

				if (!!data) {
					if (!!!data.value) {
						return false;
					}
					if (data.modelType == 1) {//车辆
						//车辆修改详情
						that.axios.post(that.apiUrl.coreVehicleCoreVehicleInfo,{uuid: data.value}).then(res => {
							if (!!res) {

								that.carFormData.wzDrivingLicenseImg = res.data.data.vehicleLicenseImg;//行驶证照片

                that.carFormData.wzVehiclePlateNo = res.data.data.carPlateNo;//车牌号
                that.carFormData.wzVehicleFrameNo = res.data.data.frameNo;//车架号
                that.carFormData.wzVehicleType = res.data.data.vehicleType;//车辆类型

								that.carFormData.wzVehicleOwnerName = res.data.data.vehicleOwnerName;//车主业户
								that.carFormData.wzVehicleOwnerPhone = res.data.data.vehicleOwnerPhone;//车主电话
                that.carFormData.wzVehicleDrivingPermitIssueDate = res.data.data.vehicleDrivingPermitRegisterDate;//初登日期

                that.carFormData.wzProvinceName = res.data.data.provinceName;//所属省份
                that.carFormData.wzCityName = res.data.data.cityName;//所属地市
                that.carFormData.wzCountyName = res.data.data.countyName;//所属区县

								that.carFormData.data = res.data.data;//全部数据

								//vuex赋值
								that.$store.dispatch("setVehicle", that.carFormData);
							}
						}).catch(err => {
							console.log("失败", err)
						})
					} else if (data.modelType == 2) {//挂车
						//挂车修改详情
						that.axios.post(that.apiUrl.webApi + "/core/trailer/coreTrailerInfo" ,{uuid:data.value}).then(res => {
							that.spinShow = false;
							if (!!res) {
								that.carFormData.wzDrivingLicenseImg = res.data.data.trailerLicenseImg;//行驶证照片

                that.carFormData.wzVehiclePlateNo = res.data.data.trailerPlateNo;//车牌号
                that.carFormData.wzVehicleFrameNo = res.data.data.trailerFrameNo;//车架号
                that.carFormData.wzVehicleType = res.data.data.trailerType;//车辆类型

								that.carFormData.wzVehicleOwnerName = res.data.data.trailerOwnerName;//车主业户
								that.carFormData.wzVehicleOwnerPhone = res.data.data.trailerOwnerPhone;//车主电话
                that.carFormData.wzVehicleDrivingPermitIssueDate = res.data.data.trailerDrivingPermitIssueDate;//初登日期

                that.carFormData.wzProvinceName = res.data.data.provinceName;//所属省份
                that.carFormData.wzCityName = res.data.data.cityName;//所属地市
                that.carFormData.wzCountyName = res.data.data.countyName;//所属区县

								that.carFormData.data = res.data.data;//全部数据

								//vuex赋值
								that.$store.dispatch("setVehicle", that.carFormData);
							}
						}).catch(err => {
							console.log("失败", err)
						})
					}
				}
			},

		},
		watch: {//监听
			vehicleBrieflyData(news, old) {
				this.vehicleBrieflyFun(news);
			}
		},

		beforeUpdate() {//beforeUpdate 更新前状态

		},
		updated() {//updated 更新完成状态

		},
		beforeDestroy() {//beforeDestroy 销毁前状态

		},
		destroyed() {//destroyed 销毁完成状态

		}
	}
</script>
<style lang="less">
	._wz_vehicleBriefly {
		.ivu-form-item-content {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		._wz_vehicle_details {
			margin: auto;
			display: block;
			width: 100px;
			height: 132px;
			text-align: center;
			line-height: 60px;
			border: 1px solid transparent;
			border-radius: 4px;
			overflow: hidden;
			background: #fff;
			position: relative;
			box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

			img {
				width: 100%;
				height: 100%;
			}


			._wz_vehicle_details-cover {
				align-items: center;
				display: none;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(0, 0, 0, .6);

				i {
					display: block;
					margin: auto;
					color: #fff;
					font-size: 40px;
					cursor: pointer;
				}
			}
		}

		._wz_vehicle_details:hover ._wz_vehicle_details-cover {
			display: block;
		}


    >table {
      table-layout:fixed;
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 12px !important;

      td {
        min-width: 0;
        height: 40px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        border: 1px solid #515a6e;
        padding: 0 10px;
        word-break: break-word;
      }
    }

    .demo-upload-list {
      margin: 5px auto;
      width: 200px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;

      img {
        min-height: 30%;
        max-height: 90%;
        min-width: 30%;
        max-width: 90%;
        //width: 100%;
        //height: 100%;
      }
    }
	}

</style>
